<template>
	<div>
		<!-- <div class="block">
	    
	  </div> -->
		<div class="handle-box">
			<span class="demonstration">输入查询时间</span>
			<el-date-picker v-model="value1" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
				:default-time="['12:00:00']">
			</el-date-picker>
			<!-- <el-input placeholder="用户名" class="handle-input mr10"></el-input> -->
			<el-button type="success" icon="el-icon-search" @click="getHistime()">搜索</el-button>
		
			
				<el-button type="success" class="handle-but mr10"><download-excel class="export-btn" :data="tableData" :fields="jsonFields" type="xls" header="历史信息表格"
				name="历史信息表格.xls">表格导出</download-excel></el-button>
		</div>

		<div class="table-box">
			<el-table :data="tableData" height="480" border style="width: 100% "
				:default-sort="{prop: 'temp', order: 'descending'}">
				<el-table-column prop="moisture" label="土壤湿度" width="180" sortable>
				</el-table-column>
				<el-table-column prop="temp" label="温度" width="180" sortable>
				</el-table-column>
				<el-table-column prop="hum" label="湿度" sortable>
				</el-table-column>
				<el-table-column prop="intensity" label="光强" sortable>
				</el-table-column>
				<el-table-column prop="time" label="时间" sortable>
				</el-table-column>
				<!-- <el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-delete" class="red"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column> -->
			</el-table>
		</div>
	</div>

</template>

<script>
	import {
		
		gettemhum,
		getthmhistory,
		gettimeHis,
		gethisSection,
	} from '../../api/index.js';
	import Schart from 'vue-schart';
	import bus from '../common/bus';
	import {
		Result
	} from 'element-ui';
	// 引入导出Excel表格依赖
	import FileSaver from "file-saver";
	//import XLSX from "xlsx";
	import * as XLSX from 'xlsx';
	import JsonExcel from "vue-json-excel";
	// components: {
	// 		DownloadExcel: JsonExcel,
	// 	};
		export default {
			data() {
				return {
					jsonFields: { //导出Excel表格的表头设置
						土壤湿度: 'moisture',
						温度: 'temp',
						湿度: 'hum',
						光照强度: 'intensity',
						时间:'time',
					},
					value1: '',
					formData: {
						beginTime: '',
						endTime: '',
					},
					value1: '',
					tableData: [],

				}
			},


			created() {
				this.getTHM();
				//this.search();
			},
			//mounted() {},
			methods: {
				//获取历史数据
				getTHM() {
					getthmhistory().then(res => {
						console.log(res);
						console.log(this.value1);
						this.tableData = res.list;
					})
				},
				//时间区间查找
				getHistime() {
					//console.log(this.value1[0]);
					this.changetimeform(this.value1[0], result => {
						this.formData.beginTime = result;
						console.log(this.formData.beginTime);
					});
					this.changetimeform(this.value1[1], result => {
						this.formData.endTime = result;
						console.log(this.formData.endTime);
					});
					console.log(this.formData);
					gethisSection(this.formData).then(res => {
						console.log(res);
						this.tableData = res.list;
					})
				},
				//格式转换
				changetimeform(val, callback) {
					var date = new Date(val);
					var y = date.getFullYear();
					var M = date.getMonth() + 1;
					M = M < 10 ? ('0' + M) : M;
					var d = date.getDate();
					d = d < 10 ? ('0' + d) : d;
					var H = date.getHours();
					H = H < 10 ? ('0' + H) : H;
					var m = date.getMinutes();
					m = m < 10 ? ('0' + m) : m;
					var s = date.getSeconds();
					s = s < 10 ? ('0' + s) : s;
					var time = y + '-' + M + '-' + d + ' ' + H + ':' + m + ':' + s;
					callback(time);
					//  console.log(time);

				},
				// 删除操作
				// handleDelete(index, row) {
				// 	// 二次确认删除
				// 	console.log(row);
				// 	this.$confirm('确定要删除吗？', '提示', {
				// 			type: 'warning'
				// 		}).then(() => {
				// 			this.$message.success('删除成功');
				// 			this.tableData.splice(index, 1);
				// 		})
				// 		.catch(() => {});

				// 	deleteHistory('id=' + row.id).then(res => {
				// 		console.log(res);
				// 	});

				// },



			},
		}
</script>

<style scoped>
	.table {
		width: 100%;
		height: 300px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.handle-but {
		width: 100px;
	}

	.handle-box {
		margin-bottom: 20px;
	}

	.mr10 {
		margin-right: 10px;
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #409EFF;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {

		color: #ffffff;
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	.table-box {
		margin: 20px;
		/* height: 1200px; */
	}

	.red {
		color: #ff0000;
	}

	.query {
		border: #ff0000 solid;
		width: 500rpx;
	}
</style>